<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>Hays</title>
	<link href="css/main.css" rel="stylesheet">
	
	<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
	<script src="js/jquery-1.8.3.js"></script>
	<script src="js/jquery-ui-1.9.2.custom.js"></script>	

	
	
<style>

	.glyph {
		display: block;
		float: left;
		text-align: center;
		padding: 10px;		
		width: 189px;		
		top:0;
		position:relative;
		-webkit-transition:0.2s ease-in;
		-o-transition:0.2s ease-in;
		-moz-transition:0.2s ease-in;
		-ie-transition:0.2s ease-in;
		transition:0.2s ease-in;
		cursor:pointer;
		color:#008481;
	}
	
	.glyph .icon{
		background: url(img/home.png) no-repeat;
		width:90px;
		height:60px;
		display:block;	
		margin-bottom:10px;	
		-webkit-transition:0.2s ease-in;
		-o-transition:0.2s ease-in;
		-moz-transition:0.2s ease-in;
		-ie-transition:0.2s ease-in;
		transition:0.2s ease-in;
	}
	
	/* icon 1 resterand */
	.glyph .icon1{
		background-position:0px 0px;
	}
	.glyph:hover .icon1{
		background-position:0px -60px;		
	}
	/*icon 2 place */
	.glyph .icon2{
		background-position:-90px 0px;
	}
	.glyph:hover .icon2{
		background-position:-90px -60px;		
	}
	
		/*icon 3 place */
	.glyph .icon3{
		background-position:-180px 0px;
	}
	.glyph:hover .icon3{
		background-position:-180px -60px;		
	}
	
		/*icon 4 place */
	.glyph .icon4{
		background-position:-270px 0px;
	}
	.glyph:hover .icon4{
		background-position:-270px -60px;		
	}
	
		/*icon 5 place */
	.glyph .icon5{
		background-position:0px -120px;
	}
	.glyph:hover .icon5{
		background-position:0px -180px;		
	}
	
	.glyph input {
		width: 100%;
		text-align: center;
		/*font-family: consolas, monospace;*/
		
		border:none;
		padding:4px;
		background:#eeeced;
		color:#595959;
		-webkit-transition:0.2s ease-in;
		-o-transition:0.2s ease-in;
		-moz-transition:0.2s ease-in;
		-ie-transition:0.2s ease-in;
		transition:0.2s ease-in;
	}
	.glyph:hover input {
		background:#ffffff;
		padding:4px;
		color:#595959;
	/*	font-weight: bold;*/
	}
	.glyph:hover {
		-webkit-transition: all 0.5s ease-out;
		background:#008481;
		color:#fff;
		text-shadow: none;
		-moz-text-shadow: none;
		-webkit-text-shadow: none;
		top:-5px;
		position:relative;
	}
	.glyph input {
		/*margin-top: 5px;*/
	}
	
	.fs1 {
		font-size: 79px;		
	}
	
	
</style>

	
</head>
<body >


<div class="metrouicss">
	<div class="nav-bar">
		<div class="nav-bar-inner">
     
        <a href="#"><span class="element brand">
            <!--<img class="place-left" src="./Metro UI CSS_files/logo32.png" style="height: 20px">-->
            HAYs.vn
        </span></a>
        <div class="divider"></div>

        <ul class="menu" style="overflow: visible;">
            <!--<li><a href="#">Home</a></li>-->
            <li data-role="dropdown" class="">
                <a href="#">Tìm</a>
                <ul class="dropdown-menu" style="display: none;">
                    <li><a href="#">Tìm nhà hàng</a></li>
                    <li><a href="#">Tìm địa điểm</a></li>				                   
                </ul>
            </li>
            <li data-role="dropdown" class=""><a href="#">Mua bán</a>
                <ul class="dropdown-menu" style="display: none;">
                    <li><a href="#">Ô tô</a></li>
                    <li><a href="#">Kim cương</a></li>
                    <li><a href="#">Điện tử</a></li>                  
                </ul>
            </li>           
        </ul>
		
        
		 <ul class="menu" style="overflow: visible; float:right">
            <!--<li><a href="#">Home</a></li>-->
            <li data-role="dropdown" class="">
                <a href="#">Nguyễn Duy Mạnh</a>
                <ul class="dropdown-menu" style="display: none;">
                    <li><a href="#">Global styles</a></li>
                    <li><a href="#">Layouts and templates</a></li>				
                    <li><a href="#">Grid system</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Responsive design</a>
                    </li>
                </ul>
            </li>
			</ul>

    </div>
	</div>
</div>




















<div class="container">
	<div class="main-container clearfix"> 
    
    <!----------------------------------logo --------------------------------->
       <center>
             		<img width="300" style="margin-top:100px;" height="100" src="img/logo4w.png" />
             </center>
    <!------------------------------------------------------------------------>
    
    <!------------------------------------search box------------------------------------>
    <center>
<div class="search w500">
                         	<input id="search"  placeholder="Nhập từ khóa tìm kiếm..." class="txtsearch" type="text" onblur="if(this.value=='') this.value='Nhập từ khóa tìm kiếm...'" onfocus="if(this.value =='Nhập từ khóa tìm kiếm...' ) this.value=''" value="Nhập từ khóa tìm kiếm..." maxlength="200" />
               <span></span> </div>                
               </center> 
               
                <div class="metrouicss">
        <div class="nav-bar" style="background:none !important;">
		<div class="nav-bar-inner">      
        <span class="element brand w220"></span>
             <span class="element brand"><a style="color:#008481 !important; font-size:14px !important" href="#">Tìm kiếm nâng cao</a></span>
		 <ul class="menu">
            <!--<li><a href="#">Home</a></li>-->
            <li data-role="dropdown" class="">
                <a href="#" style="color:#386300 !important">Chuyên mục</a>
                <ul class="dropdown-menu" style="display: none;">
                    <li><a href="#">Global styles</a></li>
                    <li><a href="#">Layouts and templates</a></li>				
                    <li><a href="#">Grid system</a></li>                
                    <li><a href="#">Responsive design</a>
                    </li>
                </ul>
            </li>
            
             <li data-role="dropdown" class="">
                <a href="#" style="color:#386300 !important">Địa điểm</a>
                <ul class="dropdown-menu" style="display: none;">
                    <li><a href="#">Global styles</a></li>
                    <li><a href="#">Layouts and templates</a></li>				
                    <li><a href="#">Grid system</a></li>                
                    <li><a href="#">Responsive design</a>
                    </li>
                </ul>
            </li>
			</ul>
</div>
</div>
</div>
    <!---------------------------------------------------------------------------------->
	<div class="h50"></div>

	<div class="glyph">
			<center><span class="icon icon1"></span></center>
			<input type="text" readonly="readonly" value="Tìm nhà hàng" />
		</div> 
		<div class="glyph">
			<center><span class="icon icon2"></span></center>
			<input type="text" readonly="readonly" value="Tìm địa điểm" />
		</div> 
		
		


		<div class="glyph">
			<center><span class="icon icon3"></span></center>
			<input type="text" readonly="readonly" value="Chợ ô tô" />
		</div> 
		<div class="glyph">
			<center><span class="icon icon4"></span></center>
			<input type="text" readonly="readonly" value="Chợ kim hoàn" />
		</div> 	
		<div class="glyph">
			<center><span class="icon icon5"></span></center>
			<input type="text" readonly="readonly" value="Chợ điện tử" />
		</div> 
	
	</div><!-- // main container -->
</div>

<div class="h100"></div>
<div class="footer">
<div class="hr"></div>
<div class="container"> 
<div class = "float-right">
<a href="#">Trang chủ</a>
|
<a href="#">Đăng tin</a>
|
<a href="#">Liên hệ</a>
|
<a href="#">Về chúng tôi</a>
<div>

</div>
</div>
</body>
</html>
